<!--
 * @Description: 第四章-路由传参
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-26 00:29:27
-->
<template>

    <div class="reg2">
        <h4><button @click="router.back()">返回</button>路由传参 详情页面</h4>
        <div>
            <h5>route.query</h5>
            <div>品牌 route.query.name： {{ route.query.name }}</div>
            <div>价格 route.query.price： {{ route.query.price }}</div>
            <div>ID route.query.id： {{ route.query.id }}</div>
        </div>

        <div>
            <h5>route.params</h5>
            <div>品牌 route.params.name： {{ route.params.name }}</div>
            <div>价格 route.params.price： {{ route.params.price }}</div>
            <div>ID route.params.id： {{ route.params.id }}</div>
        </div>

        <div>
            <h5>动态路由参数</h5>
            <div>品牌 route.params.name： {{ route.params.name }}</div>
            <div>价格 route.params.price： {{ route.params.price }}</div>
            <div>ID route.params.id： {{ route.params.id }}</div>
        </div>

    </div>

</template>
<script setup lang="ts">

import { useRoute, useRouter } from 'vue-router';

// 注意，没有r
const route = useRoute()

const router = useRouter()

</script>
<style scoped>
.reg2 {
    background-color: blue;
    color: #fff;
}
</style>